<!DOCTYPE html>

<html>

<head>
    <meta charset="UTF-8">
    <title>阻止事件传播</title>
    <style type="text/css">
        h3,p{
            text-align: center;
        }
        .outer,
        .middle,
        .inner {
            margin: 50px;
            border: 2px solid transparent;
            min-height: 100px;
        }

        .outer {
            border-color: gray;
        }

        .middle {
            border-color: blue;
        }

        .inner {
            border-color: red;
        }
    </style>
</head>

<body>

    <h3>阻止事件传播</h3>
    <p>在捕获阶段事件对象从外部向事件目标传递</p>
    <p>事件对象到达事件目标后开始进入事件冒泡阶段</p>
    <p>在冒泡阶段事件对象从事件目标向外传递</p>

    <div class="outer">
        <div class="middle">
            <div class="inner"></div>
        </div>
    </div>

    <script type="text/javascript">
        (function () {
            const outer = document.querySelector('.outer');
            const middle = document.querySelector('.middle');
            const inner = document.querySelector('.inner');

            const type = 'click';
            const capture = true;

            outer.addEventListener( type , {
                handleEvent(e){
                    console.log( 'outer listener: ' , e.type , e.target , e.eventPhase );
                }
            } , capture );

            middle.addEventListener( type , {
                handleEvent(e){
                    // 阻止事件传播
                    e.stopPropagation();
                    console.log( 'middle listener: ' , e.type , e.target , e.eventPhase );
                }
            } , capture );

            inner.addEventListener( type , {
                handleEvent(e){
                    console.log( 'inner listener: ' , e.type , e.target , e.eventPhase );
                }
            } , capture );
        })();
    </script>

</body>

</html>